<%--
  Created by IntelliJ IDEA.
  User: 吴超
  Date: 2022/4/28
  Time: 09:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
span,li{
    color: red;
    font-size: 33px;
}
    </style>
    <script src="../js/jquery.js"></script>
</head>
<body>
账户<input type="text" name="name" id="name"><span id="sp1"></span><br/>
密码<input type="text" name="pwd" id="pwd"><span id="sp2"></span><br/>
模糊异步查询<input type="text" name="user" id="user">
<input type="button" value="点我异步模糊查询" id="bt"><br/>
<ul id="ul"></ul>
<%--//异步注册的时候，我们想一次性全部把值带过去，自己不发送，
表单序列化，禁用，没有naem，transient不能用--%>
<form action="${pageContext.request.contextPath}/ServletAjax2" method="get">
    姓名<input type="text" name="name" id="name1"><span id="sp3"></span><br/>
    性别<input type="text" name="sex" id="sex"><br/>
    age<input type="text" name="age" id="age"><br/>
    <input type="button" value="点我异步注册" id="bt1">
    （请输入查询名字，支持迷糊）<input type="text" name="text" id="text1"><br/>
    <ul></ul>
</form>
<form action="${pageContext.request.contextPath}/ServletAjax2" method="get">
  <input type="submit" value="xxx">
</form>

<div id="dd"></div>
<script>
    const getJSON = function(url) {
        const promise = new Promise(function(resolve, reject){
            const handler = function() {
                if (this.readyState !== 4) { return; }
                if (this.status === 200) { resolve(this.response);
                } else { reject( new Error(this.statusText)); }
            };
            const client = new XMLHttpRequest();
            client.open("GET", url);
            client.onreadystatechange = handler;
            client.responseType = "json";
            client.setRequestHeader("Accept", "application");
            client.send();
        });
        return promise;
    };

    $("#bt1").click(function () {
       $.get(
           "${pageContext.request.contextPath}/ServletAjax2?op=xuliehua",
           $("form").serialize(),
           function (data) {
               if(data.trim()=="y"){
                   $("#sp3").html("注册成功");
               }else{
                   $("#sp3").html("注册失败，用户名重复");
               }
           }
       );
    });
$("#text1").blur(function () {//.then(func1,func2) then(fun),catch()
    $("form ul").html("");
    var text1=$("#text1").val();
    getJSON("${pageContext.request.contextPath}/ServletAjax2?op=find1&text1="+text1)
        .then(function (data) {
            $.each(data,function () {
                var li="<li>"+this.id+"-1111--"+this.name+"</li>";
                $("form ul").append(li);
            })
        },function (error) {//返回消息报文头1）成功或者失败的标志 2状态码 3成功或者失败的语句提示4）data
            $("form ul").html("失败了异步");
        }).catch(function () {
        
    }).finally(function () {

    });
  /*  $.getJSON("${pageContext.request.contextPath}/ServletAjax2?op=find1&text1="+text1,
    function (data) {
        $.each(data,function () {
            var li="<li>"+this.id+"---"+this.name+"</li>";
            $("form ul").append(li);
        })
    }
    );*/
});

    $("#dd").load("my.html");//我前端Vue的组件
    //路由 和 组件

  $("#bt").click(function () {
      $("#ul").html("");
      var user=$("#user").val();
      $.getJSON(
          "${pageContext.request.contextPath}/ServletAjax2?op=find&user="+user,
          function (data) {//反序列
              $.each(data,function () {
                      var li = "<li>" + this.id + "---" + this.name + "---" + this.sex + "</li>";
                      $("#ul").append(li);
              });
          }
      );
  });

$("#name").blur(function () {
    var name=$("#name").val();
    $.get(
        "${pageContext.request.contextPath}/ServletAjax2?op=login&name="+name,
        function (data) {
            if(data.trim()=="y"){
                $("#sp1").html("*对不起，不能注册");
            }else{
                $("#sp1").html("*恭喜能注册");
            }
        }
    );
});


</script>
</body>
</html>
